<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<title>参培员工</title>

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/css/bootstrap.css">

<!-- FontAwesome CSS -->
<link rel="stylesheet" href="css/css/font-awesome.min.css">

<!-- ElegantFonts CSS -->
<link rel="stylesheet" href="css/css/elegant-fonts.css">

<!-- themify-icons CSS -->
<link rel="stylesheet" href="css/css/themify-icons.css">

<!-- Swiper CSS -->
<link rel="stylesheet" href="css/css/swiper.min.css">

<!-- Styles -->
<link rel="stylesheet" href="style.css">

<script src="js/jquery-2.0.3.js" type="text/javascript" charset="utf-8"></script>
<style>
.x-right {
	width: 180px;
}

#ref {
	width: 300px;
}
</style>
<style type="text/css">
.dropdown {
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background: transparent;
	min-width: 130px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	color: #19c880;
}

.dropdown:hover .dropdown-content {
	display: block;
}
</style>
</head>
<style type="text/css">
.dropdown {
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background: transparent;
	min-width: 150px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	color: #19c880;
}

.dropdown:hover .dropdown-content {
	display: block;
}
</style>
<style>
/* Make the image fully responsive */
.carousel-inner img {
	width: 100%;
	height: 100%;
}
</style>
</head>
<body class="courses-page">

	<c:if test="${pd==null}">
		<c:redirect url="RefTableServlet?op=showRefTableByCpNo"></c:redirect>
	</c:if>

	<div class="page-header">
		<header class="site-header">

			<div class="nav-bar">
				<div class="container">
					<div class="row">
						<div class="col-9 col-lg-3">
							<div class="site-branding">
								<h1 class="site-title">
									<a href="TeacherMain.jsp" rel="home">Emp<span>Training</span></a>
								</h1>
							</div>
							<!-- .site-branding -->
						</div>
						<!-- .col -->

						<div
							class="col-3 col-lg-9 flex justify-content-end align-content-center">
							<nav
								class="site-navigation flex justify-content-end align-items-center">
								<ul style="overflow: inherit;"
									class="flex flex-column flex-lg-row justify-content-lg-end align-content-center">
									<li><a href="TeacherMain.jsp">我的主页</a></li>
									<li><a href="#"></a></li>


									<li>
										<div class="dropdown" id="c1">
											<a href="TeacherCourse.jsp" class="dropbtn">我的课程 <span
												id="down" class="fa fa-caret-down"
												style="margin-left: 10px; display: block;"></span> <span
												id="up" class="fa fa-caret-up"
												style="margin-left: 10px; display: none;"></span>
											</a>
											<div class="dropdown-content">
												<a
													href="CCPTServlet?op=queryByTea&teacherTel=${sessionScope.username}&courseStatus=1">招募中</a>
												<a
													href="CCPTServlet?op=queryByTea&teacherTel=${sessionScope.username}&courseStatus=2">开课中</a>
												<a
													href="CCPTServlet?op=queryByTea&teacherTel=${sessionScope.username}&courseStatus=3">已结课</a>
												<a
													href="CCPTServlet?op=queryByTea&teacherTel=${sessionScope.username}&courseStatus=4">已取消</a>
												<a
													href="CCPTServlet?op=queryByTea&teacherTel=${sessionScope.username}&courseStatus=5">已满员</a>
											</div>
										</div>
									</li>


									<li><a href="#"></a></li>
									<li class="current-menu-item"><a href="TeaEndCourse.jsp">学员成绩</a></li>
									<li><a href="#"></a></li>
									<li>
										<div class="dropdown">
											<a href="TeacherInfo.jsp" class="dropbtn">个人中心 <span
												id="down" class="fa fa-caret-down"
												style="margin-left: 10px; display: block;"></span> <span
												id="up" class="fa fa-caret-up"
												style="margin-left: 10px; display: none;"></span>
											</a>
											<div class="dropdown-content">
												<a href="TeacherInfo.jsp">个人信息</a> <a href="#" id="Logout">退出登录</a>
											</div>
										</div>
									</li>
								</ul>

								<div class="hamburger-menu d-lg-none">
									<span></span> <span></span> <span></span> <span></span>
								</div>
								<!-- .hamburger-menu -->

							</nav>
							<!-- .site-navigation -->
						</div>
						<!-- .col -->
					</div>
					<!-- .row -->
				</div>
				<!-- .container -->
			</div>
			<!-- .nav-bar -->
		</header>
		<!-- .site-header -->

		<div class="page-header-overlay">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<header class="entry-header">
							<h1><%=request.getAttribute("courseName")%>-课程学员
							</h1>
						</header>
						<!-- .entry-header -->
					</div>
					<!-- .col -->
				</div>
				<!-- .row -->
			</div>
			<!-- .container -->
		</div>
		<!-- .page-header-overlay -->
	</div>
	<!-- .page-header -->





	<div class="container">
		<div style="position: absolute; right: 220px; top: 450px;">

			<button type="button" class="btn btn-success" id="exportexcel">导出名单</button>
		</div>


		<section class="featured-courses horizontal-column courses-wrap">

			<div class="container">
				<div class="row">
					<div class="col-12">
						<header
							class="heading flex justify-content-between align-items-center">


							<form class="layui-form x-center" action="RefTableServlet"
								method="post" style="width: 840px">
								<div class="layui-form-pane"
									style="margin-top: 15px; margin-right: 15px;">
									<div class="layui-form-item">
										<div class="layui-input-inline">
											<input type="hidden" name="cpNo"
												value="<%=request.getAttribute("cpNo")%>"> <input
												type="hidden" name="courseName"
												value="<%=request.getAttribute("courseName")%>"> <input
												type="text" name="empNo" placeholder="请输入员工号" id="empNo"
												name="empNo" class="layui-input"
												value="<%=request.getAttribute("empNo") == null ? "" : request.getAttribute("empNo")%>">
										</div>
										<input type="hidden" id="op" value="showRefTableByCpNo"
											name="op">
										<div class="layui-input-inline" style="width: 50px">
											<button class="layui-btn" type="submit" lay-submit=""
												lay-filter="sreach">
												<i class="layui-icon">&#xe615;</i>
											</button>

										</div>
									</div>
								</div>
							</form>
							<button class="layui-btn"
								onclick="member_add('添加参培','AddRef.jsp','800','550')">
								<i class="layui-icon">&#xe608;</i>添加
							</button>
							&nbsp;&nbsp;&nbsp; <span class="x-right"
								style="line-height: 40px">共有数据：<span class="layui-badge">${pd.totalCount}</span>
								条
							</span>

						</header>
						<!-- .heading -->
					</div>
					<!-- .col -->

					<div class="col-12 col-lg-12">
						<div class="layui-form">
							<table class="layui-table">

								<thead>
									<tr>

										<th>参培编号</th>
										<th>员工编号</th>
										<th>员工姓名</th>
										<th>计划编号</th>
										<td>课程名称</td>



									</tr>
								</thead>
								<c:if test="${pd!=null}">
									<!-- 遍历 -->
									<c:forEach items="${pd.data}" var="refTable">
										<tbody id="x-img">
											<tr>

												<td>${refTable.refTableNo}</td>
												<td>${refTable.empNo}</td>
												<td>${refTable.eName}</td>
												<td>${refTable.cpNo}</td>
												<td>${refTable.cName}</td>
											</tr>
										</tbody>
									</c:forEach>
								</c:if>
							</table>
							<div id="page"></div>


						</div>

					</div>
					<!-- .col -->


				</div>
				<!-- .row -->
			</div>
			<!-- .container -->
		</section>
		<!-- .courses-wrap -->


	</div>
	<!-- .container -->
	<footer class="site-footer">
		<div class="footer-widgets">
			<div class="container">
				<div class="row">
					<div class="col-12 col-md-6 col-lg-3">
						<h2 class="w-100">版权</h2>
						<div class="foot-about">
							<p class="footer-copyright">版权所有:bug总和我作队</p>
						</div>
						<!-- .foot-about -->
					</div>
					<!-- .col -->
					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-md-0">
						<div class="foot-contact">
							<h2>联系我们</h2>

							<ul>
								<li>电子邮件：1727283192@qq.com</li>
								<li>电话：17606064136</li>
								<li>地址：福建省厦门市</li>
							</ul>
						</div>
						<!-- .foot-contact -->
					</div>
					<!-- .col -->

					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-lg-0">
						<div class="quick-links flex flex-wrap">
							<h2 class="w-100">快速连接</h2>

							<ul class="w-50">
								<li><a href="about.html">关于 </a></li>
								<li><a href="#">使用条款</a></li>
								<li><a href="#">隐私政策 </a></li>
								<li><a href="#">联系我们</a></li>
							</ul>

						</div>
						<!-- .quick-links -->
					</div>
					<!-- .col -->

					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-lg-0">
						<div class="follow-us">
							<h2>关注我们的动向</h2>
							<img src="images/erweima.png">
						</div>
						<!-- .quick-links -->
					</div>
					<!-- .col -->
				</div>
				<!-- .row -->
			</div>
			<!-- .container -->
		</div>
		<!-- .footer-widgets -->

		<input type="hidden" value="<%=request.getParameter("cpNo")%>"
			id="getcpNo"> <input type="hidden"
			value="<%=request.getAttribute("courseName")%>" id="getcourseName">

		<script type='text/javascript' src='js/js/jquery.js'></script>
		<script type='text/javascript' src='js/js/swiper.min.js'></script>
		<script type='text/javascript' src='js/js/masonry.pkgd.min.js'></script>
		<script type='text/javascript' src='js/js/jquery.collapsible.min.js'></script>
		<script type='text/javascript' src='js/js/custom.js'></script>

		<script src="layui/layui.all.js" charset="utf-8"></script>
		<script src="js/x-layui.js" charset="utf-8"></script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/layui_exts/excel.js"></script>

		<script type="text/javascript"
			src="${pageContext.request.contextPath}/layui_exts/xlsx.js"></script>
		<script>
	var courseName = $("#getcourseName").val();
	console.log(courseName);
	var cpNo = $("#getcpNo").val();
	console.log(cpNo)
	  
	layui.use(['laypage', 'layer'], function(){
		  var laypage = layui.laypage
		  ,layer = layui.layer;
	
		  var empNo = $("#empNo").val();
			
		laypage.render({
			elem : 'page',
			theme:'#00BFFF',
			count : ${pd.totalCount},//数据总数，从服务端得到
			curr:${pd.page},//得到当前页，以便向服务端请求对应页的数据。
			limit : ${pd.pageSize},
			layout : [ 'count', 'prev', 'page', 'next','skip' ],
			jump : function(obj,first) {
				
				
				 //obj包含了当前分页的所有参数，
				//首次不执行
			    if(!first){
			    	location.href = "RefTableServlet?op=showRefTableByCpNo&page="
						+ obj.curr+"&empNo="+empNo+"&cpNo="+cpNo+"&courseName="+courseName;
			    }
			}
		});
			


		});
	  
		
		/*用户-添加*/
		function member_add(title, url, w, h) {
			x_admin_show(title, url, w, h);
		}
		
		
		
		$("#exportexcel").click(function(){
			
			loading = layer.load(1, {shade: [0.3, '#fff']});
	        var $ = layui.jquery;
	        var excel = layui.excel;
	        $.ajax({
	            url:     'RefTableServlet',
	            type : 'post',
	            data : {
	            	op : 'showRefTableByExcel',
	            	cpNo: cpNo
	            },
	            dataType: 'json',
	           
	            success: function(res) {
	                layer.close(loading);
	            	console.log("res:"+res)
	          	     layer.msg('导出成功！');
	                // 假如返回的 res.data 是需要导出的列表数据
	                console.log(res.data);//
	                var data = res.data;
	                // 重点！！！如果后端给的数据顺序和映射关系不对，请执行梳理函数后导出
	                //限定能出现的字段
	                  data = excel.filterExportData(data, [
						'refTableNo'
						,'empNo'
						,'eName'
						,'cpNo'
						,'cName'
					]);
					// 重点2！！！一般都需要加一个表头，表头的键名顺序需要与最终导出的数据一致
	                // 1. 数组头部新增表头
	                data.unshift({refTableNo: '参培编号',empNo: '员工编号',eName:'员工姓名',cpNo:'课程计划编号',cName:'课程名'});
	                // 3. 执行导出函数，系统会弹出弹框
	                // 重点！！！如果后端给的数据顺序和映射关系不对，请执行梳理函数后导出
	              
				excel.downloadExcel(data, '导出参培数据', 'xlsx');
				
	            },
	            error:function(res){
	                layer.close(loading);
	                layer.msg('导出失败');
	            }
	        });
			
		})
	</script>
		<!--退出登录-->
		<script>
		layui.use([ 'layer' ],function() {
			$ = layui.jquery;//jquery
			layer = layui.layer;//弹出层
			$("#Logout").click(function() {
					layer.confirm('确认要退出登录吗？',function(index) {
						$.ajax({
							url : "LoginServlet",
							type : "get",
							data : {
								op1:"logout"
							},
							success : function(data) {
								if (data.code == 1) {
									location.href = "http://localhost:8080/EmpTrainingTest/Login.jsp";
									return false;
								} 
							},
							dataType : "json"
						});	
					});
				});
			});
	</script>
</body>
</html>
